<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智淘GO二手交易平台</title>
    <style>
        /* 新增导航栏样式 */
        .main-nav {
            position: absolute;
            top: 730px;  /* 根据原布局调整位置 */
            left: 0;
            right: 0;
            z-index: 1000;
            width: 1000px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        }

        .nav-list {
            display: flex;
            justify-content: center;
            padding: 15px 0;
        }

        .nav-item {
            margin: 0 25px;
            position: relative;
        }

        .nav-item a {
            color: #4d1d12;
            font-size: 18px;
            font-weight: 500;
            padding: 8px 15px;
            transition: all 0.3s;
            border-radius: 4px;
        }

        .nav-item a:hover {
            color: #fff;
            background: #ff7f50;
            transform: translateY(-2px);
        }

        .nav-item a.active {
            border-bottom: 3px solid #ff7f50;
        }
    </style>
    <style>
         * {margin: 0;padding: 0;list-style: none;}
        body{ color: #746d6d; background: url("https://b.zol-img.com.cn/sjbizhi/images/11/1080x1920/1592964698813.jpg") center/cover no-repeat; font-weight: normal; }
        img{border: none;}
        a{text-decoration: none; outline:none;  color: #4d1d12;}
        a:hover{color: #ee8040;}

        input{outline: none; border: none; background: none;font-family:"Microsoft Yahei", arial,sans-serif;}
        h1,h2,h3,h4,h5,p{font-family:"Microsoft Yahei", arial,sans-serif; }
        em,h2,h1,h3,i{font-style: normal; font-weight: normal;}
        em,span{display: inline-block;}

        .hobbies {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            perspective: 340px;

        }

        .hobbies_bgc {
            height: 800px;
            width: 100%;
        }
         .carousel {
             width: 100%;
             height: 750px; /* 根据你的图片高度调整 */
             overflow: hidden;
             position: relative;
             z-index: 1; /* 轮播图层级 */
         }

         .carousel-inner {
             display: flex;
             width: 300%; /* 6张图片，每张图片占宽度 */
             animation: slide 60s infinite; /* 秒轮播一次 */
         }

         .carousel-inner img {
             width: 100%;
             height: 100%;
             object-fit: cover; /* 确保图片覆盖整个区域 */
         }

         @keyframes slide {
             0% { transform: translateX(0%); }
             16.66% { transform: translateX(-100%); }
             33.32% { transform: translateX(-200%); }
             49.98% { transform: translateX(-300%); }
             66.64% { transform: translateX(-400%); }
             83.3% { transform: translateX(-500%); }
             100% { transform: translateX(0%); }
         }
        .stars {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 2px;
            z-index: 999;
            border-radius: 50%;
            box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white, -377px -386px #c7c7c7, -80px 337px #cccccc, 478px -178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c4, 716px -132px #fafafa, -253px -286px #e3e3e3, 646px 178px #f0f0f0, 201px 24px #d1d1d1, 178px -58px #c7c7c7, -557px 368px #ededed, 0px 219px #d9d9d9, -266px -269px #cccccc, 242px -197px #c9c9c9, -419px 193px #c2c2c2, -47px 91px #c7c7c7, -109px 75px #c2c2c2, -146px -453px #d6d6d6, 671px -350px #f2f2f2, 421px -91px #d9d9d9, 738px 19px #ededed, -316px -155px #dedede, 419px 244px #fcfcfc, -278px -418px #d6d6d6, -581px -181px #fcfcfc, 139px 264px #d9d9d9, 691px -11px #ebebeb, -622px 402px #c2c2c2, 219px 396px #f0f0f0, -149px -423px white, -716px -78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6d6, -227px -24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px -427px #cfcfcf, -368px 250px #f7f7f7, 715px -415px #fafafa, 411px -301px #f0f0f0, -322px 287px #d9d9d9, -429px -90px #f2f2f2, -327px -387px #f0f0f0, -491px 183px #c2c2c2, -133px 250px #d4d4d4, 538px 139px #e3e3e3, -417px -125px #f0f0f0, 653px -351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px -371px #cfcfcf, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px whitesmoke, 716px -350px whitesmoke, 321px 67px #fafafa, -237px -300px #cfcfcf, 74px 152px #c9c9c9, 587px -123px #fcfcfc, 699px -332px whitesmoke, 399px 355px #f7f7f7, -323px 314px #dbdbdb, 89px 416px #c7c7c7, 445px 38px #e3e3e3, 572px 122px #c4c4c4, -258px 372px white, 49px 306px #d9d9d9, 437px -35px #dedede, 566px 174px #f2f2f2, 732px -299px whitesmoke, -410px 394px #ededed, 131px -415px white, 19px -326px #e8e8e8, -700px -188px #d1d1d1, 96px -1px #e0e0e0, -328px -396px #f0f0f0, -117px -214px #fcfcfc, -53px 261px #ebebeb, 80px 134px #d6d6d6, -364px -216px white, -636px -125px #dbdbdb, -639px -265px #e3e3e3, 208px 98px #c7c7c7, 172px 467px #e0e0e0, 435px 309px #e3e3e3, 194px -259px #f0f0f0, 209px -186px #c9c9c9, -312px 418px #fafafa, 229px 407px #c9c9c9, -449px -357px #fafafa, 674px 121px #e8e8e8, 608px -429px #ebebeb, -431px -428px #cfcfcf, 105px 462px #e3e3e3, -179px -372px #e3e3e3, 143px -317px #d6d6d6, -449px -149px #fafafa, -544px 250px #dedede, -220px -323px whitesmoke, 658px 8px whitesmoke, -656px -244px #e8e8e8, 347px 11px whitesmoke, 694px -230px #f7f7f7, -317px 1px #c4c4c4, 28px 23px #fcfcfc, -382px 321px #dbdbdb, 632px -74px #c4c4c4, 154px -245px #c2c2c2, -553px 337px #d6d6d6, -48px -243px #d1d1d1, 92px -391px #cccccc, -71px -256px #cfcfcf, -372px 57px #d9d9d9, 369px -140px #fcfcfc, 675px 81px #c2c2c2, -663px 254px #cccccc, 703px -203px #ededed, 74px -363px #c2c2c2, 643px -458px #d1d1d1, 198px 359px #cccccc, 265px 309px #d4d4d4, -353px -368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px -397px #d1d1d1, 467px 25px whitesmoke, -558px -272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px white, 10px -203px #c9c9c9, 104px -292px #f0f0f0, -667px -29px #d1d1d1, 557px -155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2, -108px -223px #e0e0e0, 523px -156px #ebebeb, 691px 230px white, -507px -13px #d1d1d1, -349px 332px #dedede, 520px 266px whitesmoke, -66px -250px #e6e6e6, -496px -449px #ebebeb, 414px -170px #dedede, -649px 230px #ebebeb, 598px -92px #c7c7c7, -638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px -241px #f0f0f0, 527px -14px #dedede, 203px -61px #cfcfcf, -716px -284px #ebebeb, -525px 134px #c2c2c2;
            animation: fly 15s linear infinite;
            transform-style: preserve-3d;
        }

        .stars:before,
        .stars:after {
            content: "";
            position: absolute;
            width: inherit;
            height: inherit;
            box-shadow: inherit;
        }

        .stars:before {
            transform: translateZ(-300px);
            opacity: .6;
        }

        .stars:after {
            transform: translateZ(-600px);
            opacity: .4;
        }

        @keyframes fly {
            from {
                transform: translateZ(0px);
                opacity: .6;
            }
            to {
                transform: translateZ(180px);
                opacity: .8;
            }
        }
        .hobbies_tit {
            position: absolute;
            color:white;
            top: 280px;
            left: 0;
            right: 0;
            font-size: 28px;
            font-weight: 550;
            z-index: 10;
            bottom: 0;
            width: 800px;
            margin: auto;
            text-align: center;
        }
        .titles {
            position: absolute;
            color:white;
            top: 350px;
            left: 0;
            right: 0;
            font-size: 28px;
            font-weight: 550;
            z-index: 10;
            bottom: 0;
            width: 800px;
            margin: auto;
            text-align: center;
        }
        .ribbon {
            display: flex;
            justify-content: center;
            position: absolute;
            right: 300px;
            top: 50px;
            margin: auto;
            z-index: 100;
        }

        .ribbon:after,
        .ribbon:before {
            margin-top: 0.5em;
            content: "";
            display: flex;
            ;
            border: 1.5em solid #fff;
        }

        .ribbon:after {
            border-right-color: transparent;
        }

        .ribbon:before {
            border-left-color: transparent;
        }

        .ribbon a:link,
        .ribbon a:visited {
            color: #000;
            text-decoration: none;
            height: 3.5em;
            overflow: hidden;
        }

        .ribbon span {
            background: #fff;
            display: inline-block;
            line-height: 3em;
            padding: 0 1.5em;
            margin-top: 0.5em;
            position: relative;
            -webkit-transition: background-color 0.2s, margin-top 0.2s;
            /* Saf3.2+, Chrome */
            -moz-transition: background-color 0.2s, margin-top 0.2s;
            /* FF4+ */
            -ms-transition: background-color 0.2s, margin-top 0.2s;
            /* IE10 */
            -o-transition: background-color 0.2s, margin-top 0.2s;
            /* Opera 10.5+ */
            transition: background-color 0.2s, margin-top 0.2s;
        }

        .ribbon a:hover span {
            background: #FFD204;
            margin-top: 0;
        }

        .ribbon span:before {
            content: "";
            position: absolute;
            top: 3em;
            left: 0;
            border-right: 0.5em solid #9B8651;
            border-bottom: 0.5em solid #fff;
        }

        .ribbon span:after {
            content: "";
            position: absolute;
            top: 3em;
            right: 0;
            border-left: 0.5em solid #9B8651;
            border-bottom: 0.5em solid #fff;

        }


        .goods{
            margin-left: 250px;
            margin-right: 250px;
            font:12px/20px "Microsoft Yahei", arial,sans-serif;
            animation: downs 2s linear infinite;

        }

        .conBigTitle{width: 1000px; text-align: center; padding: 44px 0 30px 0; }
        .conBigTitle h2{font-size: 26px;text-align: center; color: white; height: 36px;}
        .conBigTitle p{color: white;text-align: center;}
        .conBigTitle p a{ margin: 0 4px;color: white;text-align: center;}

        .show{width:1000px; height: 526px; z-index: 100;background: url("https://file.moyublog.com/d/file/2024-05-29/2751e74b8652543e97276d3943c581f0.jpg") center/cover no-repeat; position: relative;isolation: isolate; }
        .show::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.7); /* 调整透明度 0.7为推荐值 */backdrop-filter: blur(2px); /* 可选轻微模糊效果 */z-index: -1;}
        .show > * {position: relative;z-index: 1;}
        .show .sign{width: 63px; height: 63px; background-position: -26px 0; position: absolute; left: 0; top: 0;}
        .show .showLeft{width: 246px; height: 481px; padding: 45px 56px 0; float: left;}
        .show .showLeft h3{width: 246px; height: 22px; font-size: 20px; font-weight: 300; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis; color: #7c4639;}
        .show .showLeft .author{margin: 10px 0 20px 0;}
        .show .showLeft .introduce{ width: 246px;  height: 64px; overflow: hidden; margin-bottom: 94px; line-height: 16px; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 4; -webkit-box-orient: vertical;  position:relative;}

        .show .showLeft span{width: 158px; height: 190px; float: right;  position: relative;}
        .show .showLeft img{position: absolute; z-index: 1;}
        .show .showLeft .goodsCover{width: 156px; height: 208px; }
        .show .showLeft .shadow{position: absolute; right: -20px; bottom:-20px; z-index: 0}
        .show .showMid{float: left;  width: 358px; border-left: 1px solid #2b0505; box-sizing: border-box;}
        .show .showMid li{float: left; width: 101px; padding: 40px 38px 42px; border-right: 1px solid #2b0505;}
        .show .showMid li img{width: 102px; height: 136px;}
        .show .showMid li p{width: 104px; height: 20px; overflow: hidden;}
        .pubgoods .showMid li p{width: 104px; height: 20px; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}
        .pubgoods .showMid li .goodsName{color: #212121;}
        .show .showMid li p a{color: #4d1d12;}
        .show .showMid li p a:hover{color: #f26552;}
        .show .showMid .tb{border-top: 1px solid #2b0505;}

        .show .showRight{float: left; width: 253px; padding: 28px 0 0 30px;}
        .show .showRight h3{width: 228px; height: 30px; font-size: 20px; color: #f26552; position: relative; padding-left: 28px; font-weight: 300;}
        .show .showRight .crown{width: 21px; height: 18px; background-position: 0px -68px; float: left; position: absolute; left: 0; top:2px;}
        .show .showRight li,.show .showRight dl{overflow: hidden;}
        .show .showRight .open{padding-top: 16px;}
        .show .showRight dl dt{float: left; text-align: right; width: 10px; margin-right: 18px;}
        .show .showRight dl dd{float: left; border-bottom: 1px solid #dfdfdf; width: 200px;}
        .show .showRight .open dd .goodsPic{width: 63px; height: 84px; display: block;  border: 1px solid #2b0505; float: left; margin: 0 16px 16px 0;}
        .show .showRight li .goodsPic img{width: 63px; height: 84px;}
        .show .showRight .open dd .goodsCon{float: left; }
        .show .showRight .open dd .goodsCon .num{font-size: 12px; font-family: arial;}
        .show .showRight .open dd .goodsCon p{color: #7c4639;  width: 100px; max-height: 32px; line-height: 16px;  text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
        .show .showRight .open dd .goodsCon p a{color: #7c4639;}
        .show .showRight .open dd .goodsCon p a:hover{color: #f26552;}
        .show .showRight dl dd s{float: left; width: 14px; height: 9px; background-position: -86px -73px; margin: 6px 6px 0 0;}
        .show .showRight .close dd{width: 200px; height: 35px; line-height: 35px;}
        .show .showRight .close dt{line-height: 35px;}
        .show .showRight .close dd .goodsName{width: 130px; height: 24px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; float: left;}
        .show .showRight .close dd .num{float: right;  font-size: 12px; font-family: arial; float: left; margin-left: 10px}
        .show .showRight .close dd s{margin-top: 12px;}
        .show .showRight li .open{display: none;}
        .show .showRight .onShow .open{display: block;}
        .show .showRight .onShow .close{display: none;}


        /* */
        .sel_Cir{
            margin-left: 250px;
            margin-right: 265px;
            font:12px/20px "Microsoft Yahei", arial,sans-serif;

        }
        .cirShow{/*height: 420px;*/ background: rgb(252, 252, 241); overflow: hidden;}
        .cirBig li{width: 333px;   height: 242px; float: left; text-align: center; padding-top: 50px;}

         .cirBig .cirHead img{width: 100%; height: 100%; border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%;}
        .cirBig li h3{font-size: 18px; width: 242px; height: 20px; overflow: hidden; margin: 16px auto 8px; color: #212121; white-space: nowrap; text-overflow: ellipsis;}
        .cirBig li h3 a:hover{color: #ffffff;}

         .cirBig li .attent s{float: left; width: 17px; height: 18px; background-position: -49px -68px; margin: 0 8px 0 10px;}
        .cirBig li .attent i{float: left; font-size: 14px;}
        .cirLittle li{width: 162px; padding: 30px 0 0 22px; overflow: hidden; float: left;}
        .cirLittle li h3{color: #212121;  width: 64px; height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
        .cirLittle li .litHead img{width: 100%; height: 100%; border-radius: 50%;}
        .cirLittle li .goodsCon{float: left; padding-left: 10px;}
        .cirLittle li h3{font-size: 16px; margin-bottom: 2px;}
        .cirLittle li .goodsCon p{ height: 18px; font-size: 12px;}

    </style>
    <style>
        /* 基础样式 */
        .about-us {
            max-width: 1000px;
            margin: 40px auto;
            padding: 0 20px;
        }

        /* 核心价值 */
        .core-values {
            background-image: url('https://ts1.tc.mm.bing.net/th/id/R-C.34504ad7bc8500c6a49d82858e0da053?rik=7hnClTMb9uITfQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f0%2f4400.jpg&ehk=UlJ8fh%2fjYk32RIDja5tOdieJboUIZQzZ03iqwsKpyNM%3d&risl=&pid=ImgRaw&r=0'); /* 替换为你的背景图URL */
            background-size: cover; /* 背景图覆盖整个区域 */
            background-position: center; /* 背景图居中显示 */
            background-repeat: no-repeat; /* 背景图不重复 */
            padding: 40px;
            border-radius: 12px;
            overflow: hidden; /* 防止内容溢出 */
        }
        .value-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 30px;
        }
        .value-item {
            text-align: center;
            padding: 25px;
            background: #a4c5de;
            border-radius: 8px;
            transition: transform 0.3s;
        }
        .value-item:hover {
            transform: translateY(-5px);
        }
        .value-icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }

        @media (max-width: 768px) {
            .philosophy-section {
                grid-template-columns: 1fr;
            }
            .value-grid {
                grid-template-columns: 1fr;
            }
        }
        /* 整体布局样式 */
        .sel_Cir {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px;
            box-sizing: border-box;
        }
        .cirShow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-image: url('https://ts1.tc.mm.bing.net/th/id/R-C.77e8e6418437361c2c4e83072889a958?rik=j797uXe%2fvM2lgw&riu=http%3a%2f%2fp2.so.qhmsg.com%2ft018437361c2c4e8307.jpg&ehk=ou6nuHVzRC5eQorfqWHsbtvjraCEYKXSrBDd4FO4kUc%3d&risl=&pid=ImgRaw&r=0'); /* 替换为你的背景图URL */
            background-size: cover; /* 背景图覆盖整个区域 */
            background-position: center; /* 背景图居中显示 */
            background-repeat: no-repeat; /* 背景图不重复 */
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            filter: brightness(0.8);
            width: 100%; /* 确保宽度占满父容器 */
        }

        .systemIntro {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .introText {
            width: 60%;
            padding-right: 20px;
        }

        .introText h3 {
            font-size: 20px;
            color: #e2eeff;
            margin-bottom: 15px;
        }

        .introText p {
            font-size: 16px;
            color: #e2eeff;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .introText ul {
            list-style-type: disc;
            padding-left: 20px;
        }

        .introText ul li {
            font-size: 14px;
            color: #e2eeff;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .introImage {
            width: 40%;
            text-align: center;
        }

        .introImage img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

<div class="hobbies">
    <!-- 新增导航栏 -->
    <nav class="main-nav">
        <ul class="nav-list">
            <li class="nav-item">
                <a href="#" class="active">系统首页</a>
            </li>
            <li class="nav-item">
                <a href="/user/products">二手商品</a>
            </li>
            <li class="nav-item">
                <a href="/user/question">智能客服</a>
            </li>
            <li class="nav-item">
                <a href="/user/order/list">我的订单</a>
            </li>
            <li class="nav-item">
                <a href="{% url 'center' %}">个人中心</a>
            </li>
        </ul>
    </nav>
    <div class="stars"></div>
    <h3 class="hobbies_tit">智在循环，淘出未来——智淘GO</h3>
    <h3 class="titles">Relove, Reuse, Relive. 🌍</h3>
    <div class="carousel">
        <div class="carousel-inner">
            <img class="hobbies_bgc" src="../../static/img/img5.jpg" alt="">
            <img class="hobbies_bgc" src="../../static/img/img1.jpg" alt="">
            <img class="hobbies_bgc" src="../../static/img/img3.jpg" alt="">
            <img class="hobbies_bgc" src="../../static/img/img4.jpg" alt="">
            <img class="hobbies_bgc" src="../../static/img/img6.jpg" alt="">
            <img class="hobbies_bgc" src="../../static/img/img2.jpg" alt="">
        </div>
    </div>
    <div class='ribbon'>
        {% if username is None%}
            <a href='/user/login'><span>登录</span></a>
            <a href='/user/register'><span>注册</span></a>
            <a href='/user/index'><span>首页</span></a>
            <a href="/user/publish"><span>发布商品</span></a>

        {% else %}
            <a><span>{{username}}你好！</span></a>
            <a href="{% url 'logout' %}"><span>退出登录</span></a>


        {% endif %}

    </div>

    <!-- / -->
   <div class="goods">
    <div class="conBigTitle">
        <h2>智淘go</h2>
        <p>
            <a href="#" target="_blank">旧物新缘</a>|
            <a href="#" target="_blank">宝藏再现</a>
        </p>
    </div>
    <div class="about-us">
        <div class="core-values">
            <h2 class="section-subtitle">核心价值</h2>
            <div class="value-grid">
                <div class="value-item">
                    <div class="value-icon">♻️</div>
                    <h3>循环经济</h3>
                    <p>延长物品生命周期，减少资源浪费</p>
                </div>
                <div class="value-item">
                    <div class="value-icon">🤝</div>
                    <h3>信任交易</h3>
                    <p>双重验证系统保障交易安全</p>
                </div>
                <div class="value-item">
                    <div class="value-icon">🌱</div>
                    <h3>绿色生活</h3>
                    <p>推动可持续的消费理念</p>
                </div>
            </div>
        </div>
    </div>
    <div class="sel_Cir">
        <div class="conBigTitle">
            <h2>关于我们   About us</h2>
        </div>
        <div class="cirShow">
            <div class="systemIntro">
                <div class="introText">
                    <h3>系统简介</h3>
                    <p>智淘Go是一个专注于二手商品交易的平台，致力于为用户提供安全、便捷、高效的二手交易体验。无论你是想出售闲置物品，还是寻找心仪的二手商品，智淘Go都能满足你的需求。</p>
                    <ul>
                        <li><strong>安全交易：</strong>我们提供严格的实名认证和交易保障机制，确保每一笔交易的安全。</li>
                        <li><strong>便捷操作：</strong>简洁易用的界面设计，让你轻松发布商品、浏览商品、完成交易。</li>
                        <li><strong>高效匹配：</strong>智能推荐系统，帮助你快速找到心仪的商品或买家。</li>
                        <li><strong>社区互动：</strong>加入我们的社区，与其他用户分享交易经验，获取更多二手交易技巧。</li>
                    </ul>
                </div>
                <div class="introImage">
                    <img src="https://ts1.tc.mm.bing.net/th/id/R-C.8b905f3900dbdbfaf0649d0ec929926f?rik=%2fhv5bC5kfqKBrg&riu=http%3a%2f%2fimage.nbd.com.cn%2fuploads%2farticles%2fimages%2f1156737%2f____500626275_____________.jpg&ehk=fcyZkUxpz0MSj3%2bxOi1p0Kuqfki%2fZou2eUo2EBWcDcE%3d&risl=&pid=ImgRaw&r=0" alt="智淘Go二手交易平台" class="lazy"/>
                </div>
            </div>
        </div>
    </div>
       <div class="show-container">
           <div class="conBigTitle">
               <h2>二手商品展示</h2>
           </div>
           <div class="show">
               <s class="sign"></s>
               <div class="showLeft">
                   <h3><a href="./goods1.html" title="二手手机" target="_blank">二手手机</a></h3>
                   <p class="author">品牌：Apple</p>
                   <p class="introduce">这款二手 iPhone 12 成色良好，机身无明显划痕或磕碰，屏幕无老化、无坏点，显示效果清晰锐利,功能齐全，电池健康度 90%，适合日常使用和游戏娱乐。</p>
                   <span>
                       <a href="./goods1.html" target="_blank" title="二手手机">
                           <img src="https://n.sinaimg.cn/sinakd20113/124/w1024h700/20220825/268a-e82de160dac128897b7ead5665a9d8a1.jpg" title="二手手机" alt="二手手机" class="goodsCover lazy">
                       </a>
                       <img src="//pweb.d.ireader.com/static/images/index/shadow.gif" alt="二手手机" class="shadow">
                   </span>
               </div>
               <ul class="showMid">
                   <li>
                       <a href="./goods2.html" target="_blank" title="二手笔记本电脑">
                           <img src="https://ts1.tc.mm.bing.net/th/id/R-C.1c41878e14e94afe114e01ee3525f1bf?rik=ZxY0H0lwXeifQw&riu=http%3a%2f%2fwww.0760sj.net%2fimg%2fpc2%2fdell%2f3459%2f03.jpg&ehk=6Iv%2bVzuL63e50Fw9hi37lUR0B%2bLO%2fb95pmJS65QFIZ4%3d&risl=&pid=ImgRaw&r=0" title="二手笔记本电脑" alt="二手笔记本电脑" class="lazy">
                       </a>
                       <p class="goodsName">
                           <a href="./goods2.html" title="二手笔记本电脑" target="_blank">二手笔记本电脑</a>
                       </p>
                       <p>品牌：Dell</p>
                   </li>
                   <li>
                       <a href="#" target="_blank" title="二手相机">
                           <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.K7gs0eRp-yBBhaijq4f3sQHaHa?rs=1&pid=ImgDetMain" title="二手相机" alt="二手相机" class="lazy">
                       </a>
                       <p class="goodsName">
                           <a href="#" title="二手相机" target="_blank">二手相机</a>
                       </p>
                       <p>品牌：Canon</p>
                   </li>
                   <li class="tb">
                       <a href="#" target="_blank" title="二手自行车">
                           <img src="https://img.alicdn.com/imgextra/i3/874216406/O1CN019DyODE1xBzqKDuHsd_!!874216406.jpg" title="二手自行车" alt="二手自行车" class="lazy">
                       </a>
                       <p class="goodsName">
                           <a href="#" title="二手自行车" target="_blank">二手自行车</a>
                       </p>
                       <p>品牌：Giant</p>
                   </li>
                   <li class="tb">
                       <a href="./goods3.html" target="_blank" title="二手耳机">
                           <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.QuVdRcrNqceVX5GyXzQVcQHaHa?rs=1&pid=ImgDetMain" title="二手耳机" alt="二手耳机" class="lazy">
                       </a>
                       <p class="goodsName">
                           <a href="./goods3.html" title="二手耳机" target="_blank">二手耳机</a>
                       </p>
                       <p>品牌：Sony</p>
                   </li>
               </ul>
               <div class="showRight">
                   <h3><s class="crown"></s><a href="#" target="_blank">热门商品</a></h3>
                   <ul>
                       <li class="onShow">
                           <dl class="open">
                               <dt>1</dt>
                               <dd>
                                   <div>
                                       <span class="goodsPic">
                                           <a href="#" target="_blank" title="二手手表">
                                               <img src="https://img14.360buyimg.com/pop/jfs/t1/162975/37/40858/126529/6527bba9Ff3d9ec7c/31ef9db2723931ad.jpg" class="lazy"/>
                                           </a>
                                       </span>
                                       <div class="goodsCon">
                                           <p>
                                               <a href="#" title="二手手表" target="_blank">手表</a><br>
                                               <span class="num">品牌：Rolex</span>
                                           </p>
                                       </div>
                                   </div>
                               </dd>
                           </dl>
                       </li>
                       <li>
                           <dl class="close">
                               <dt>2</dt>
                               <dd>
                                   <span class="goodsName">
                                       <a href="#" title="二手游戏机" target="_blank">游戏机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品牌：Sony </a>
                                   </span>
                               </dd>
                           </dl>
                       </li>
                       <li>
                           <dl class="close">
                               <dt>3</dt>
                               <dd>
                                   <span class="goodsName">
                                       <a href="#" title="二手音箱" target="_blank">音箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品牌：Bose</a>
                                   </span>
                               </dd>
                           </dl>
                       </li>
                       <li>
                           <dl class="close">
                               <dt>4</dt>
                               <dd>
                                   <span class="goodsName">
                                       <a href="#" title="二手平板电脑" target="_blank">平板电脑</a>
                                   </span>
                               </dd>
                           </dl>
                       </li>
                       <li>
                           <dl class="close">
                               <dt>5</dt>
                               <dd>
                                   <span class="goodsName">
                                       <a href="#" title="二手打印机" target="_blank">打印机</a>
                                   </span>
                               </dd>
                           </dl>
                       </li>
                       <li>
                           <dl class="close">
                               <dt>6</dt>
                               <dd>
                                   <span class="goodsName">
                                       <a href="#" title="二手图书" target="_blank">图书</a>
                                   </span>
                               </dd>
                           </dl>
                       </li>
                       <li>
                           <dl class="close">
                               <dt>7</dt>
                               <dd>
                                   <span class="goodsName">
                                       <a href="#" title="二手服装" target="_blank">服饰</a>
                                   </span>
                               </dd>
                           </dl>
                       </li>
                       <li>
                           <dl class="close">
                               <dt>8</dt>
                               <dd>
                                   <span class="goodsName">
                                       <a href="#" title="二手文玩" target="_blank">潮物文玩</a>
                                   </span>
                               </dd>
                           </dl>
                       </li>
                   </ul>
               </div>
           </div>
       </div>
   </div>


</div>
</div>

</body>
</html>